<template>
  <swiper :options="swiperOptions" class="banner">
    <!-- slides v-for="value in banners" :key="value.bannerId" -->
    <swiper-slide class="cd">
      <div class="cd-warpper" ref="cdWarpper">
        <img :src="currentSong.picUrl" alt="" />
      </div>
      <p>{{ getFirstLyric() }}</p>
    </swiper-slide>
    <swiper-slide class="lyric" ref="lyric">
      <ScrollViewVue ref="scrollview">
        <ul>
          <li
            v-for="(item, index) in this.currentLyric"
            :key="index"
            :class="{ active: currentLineNum === index }"
          >
            {{ item }}
          </li>
        </ul>
      </ScrollViewVue>
    </swiper-slide>
    <!-- 分页 -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
import ScrollViewVue from "../ScrollView.vue";
import { swiper, swiperSlide, directive } from "vue-awesome-swiper";
import { mapGetters } from "vuex";
// import style (<= Swiper 5.x)
import "swiper/dist/css/swiper.css";
export default {
  name: "PlayerMiddle",
  data() {
    return {
      swiperOptions: {
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active",
        },
        observer: true,
        observeParents: true,
        observeSlideChildren: true,
      },
      currentLineNum: "0",
    };
  },
  props: {
    currentTime: {
      type: Number,
      default: 0,
      required: true,
    },
  },
  methods: {
    getFirstLyric() {
      for (let key in this.currentLyric) {
        // 取出第一句歌词
        // console.log(key);
        return this.currentLyric[key];
      }
    },
    // 歌词立即同步的方法（递归实现）
    getActiveLineNum(lineNum) {
      // 如果lineNum小于0 则让 currentLineNum = 0 等于第一句歌词
      if(lineNum < 0){
        return this.currentLineNum
      }
      let result = this.currentLyric[lineNum + ""];
      // 如果歌词为undefined或者为空 则让歌词索引减1
      if (result === undefined || result === "") {
        lineNum--;
        // 递归方式去实现 将自减后的lineNum在传给getActiveLineNum调用
        return this.getActiveLineNum(lineNum);
      } else {
        return lineNum + "";
      }
    },
  },
  computed: {
    ...mapGetters([
      // 播放图标
      "isPlaying",
      // 默认播放界面
      "isFullScreen",
      // 歌曲的数组
      "currentSong",
      // 歌词
      "currentLyric",
    ]),
  },
  watch: {
    isPlaying(newValue, oldValue) {
      if (newValue) {
        this.$refs.cdWarpper.classList.add("active");
      } else {
        this.$refs.cdWarpper.classList.remove("active");
      }
    },
    isFullScreen(newValue, oldValue) {
      if (newValue) {
        // 重新计算高度
        this.$refs.scrollview.refresh();
      }
    },
    // 歌词的变化
    currentLyric(newValue,oldValue){
      // console.log(newValue);
      for(let key in newValue){
        // console.log(key);
        this.currentLineNum = key
        return
      }
    },
    // 歌曲的时间变化
    currentTime(newValue, oldValue) {
      //   // 1.歌词的高亮
      //   // console.log(newValue);
      //   let lineNum = Math.floor(newValue) + "";
      //   // console.log(lineNum);
      //   let result = this.currentLyric[lineNum];
      //   // console.log(result);
      //   if (result !== undefined && result !== "") {
      //     this.currentLineNum = lineNum;
      //     /* 🔔 注意这里是要当新歌词被高亮时才执行下面的代码,否则会很消耗性能*/
      //     let currentTop = document.querySelector("li.active").offsetTop;
      //     let lyricHeight = this.$refs.lyric.$el.offsetHeight;
      //     // console.log(currentTop);
      //     // console.log(lyricHeight);
      //     if (currentTop > lyricHeight / 2) {
      //       console.log("开始滚动了");
      //       this.$refs.scrollview.scrollTo(0, lyricHeight / 2 - currentTop, 100);
      //     }
      //   }
      // console.log(this.currentLineNum);

      // 1.歌词的高亮
      let lineNum = Math.floor(newValue);
      // this.getActiveLineNum(lineNum) 这里得到的是lineNum对应的那句歌词
      this.currentLineNum = this.getActiveLineNum(lineNum);
      // 2.歌词滚动同步
      /* 🔔 注意这里是要当新歌词被高亮时才执行下面的代码,否则会很消耗性能*/
      let currentLyricTop = document.querySelector("li.active").offsetTop;
      let lyricHeight = this.$refs.lyric.$el.offsetHeight;
      // console.log(currentLyricTop);
      // console.log(lyricHeight);
      if (currentLyricTop > lyricHeight / 2) {
        // console.log("开始滚动了");
        this.$refs.scrollview.scrollTo(
          0,
          lyricHeight / 2 - currentLyricTop,
          100
        );
      } else {
        this.$refs.scrollview.scrollTo(0, 0, 100);
      }
    },
  },
  components: {
    swiper,
    swiperSlide,
    ScrollViewVue,
  },
};
</script>
<style scoped lang="scss">
@import "../../assets/css/variable.scss";
@import "../../assets/css/mixin.scss";
.banner {
  position: fixed;
  top: 150px;
  bottom: 250px;
  left: 0;
  right: 0;
  .cd {
    .cd-warpper {
      margin: 0 auto;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      border: 30px solid #fff;
      overflow: hidden;
      animation: spot 5s linear infinite;
      animation-play-state: paused;
      &.active {
        animation-play-state: running;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      text-align: center;
      margin-top: 50px;
      @include font_size($font_medium);
      @include font_color();
    }
  }
  .lyric {
    li {
      text-align: center;
      @include font_size($font_medium);
      @include font_color();
      margin: 10px 0;
      &:last-of-type {
        /*这里应设置为歌词容器的一半，当播放到底部的歌词的时候，
            歌词才有空间往上滚,高亮才能正常显示
            */
        padding-bottom: 50%;
      }
      &.active {
        color: #fff;
      }
    }
  }
}
@keyframes spot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

<style lang="scss">
@import "../../assets/css/variable";
@import "../../assets/css/mixin";
/* 注意点：如果想覆盖swiper的样式，那么style标签不能是scoped的，否则无法覆盖 */
// 这里是个span标签，需要转成行内块
.my-bullet {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #fff;
  margin: 0 20px;
}

.my-bullet-active {
  width: 60px;
  @include bg_color();
}

//.banner{
// .swiper-pagination-bullet{
//     width: 16px;
//     height: 16px;
//     background-color: #fff;
//     opacity: 1;
// }
// // 激活状态 颜色应该与背景颜色一样，切换也要一样
// .swiper-pagination-bullet-active{
//     @include bg_color()
// }
//}
</style>
